<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- Location -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Location -->
    <!-- Location 接口表示其链接到的对象的位置（URL）。所做的修改反映在与之相关的对象上。 Document 和 Window 接口都有这样一个链接的Location，分别通过 Document.location和Window.location 访问。 -->


    <p>Location: href</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Location/href -->
    <!-- Location 接口的 href 属性是一个字符串化转换器(stringifier), 返回一个包含了完整 URL 的 USVString 值, 且允许 href 的更新. -->
    <script>
        console.log('location.href is ' + location.href);
    </script>
    <hr>

    <p>Location: protocol</p>
    <!-- https://developer.mozilla.org/en-US/docs/Web/API/Location/protocol -->
    <!-- 包含URL对应协议的一个DOMString，最后有一个":"。 -->
    <!-- The protocol property of the Location interface is a USVString representing the protocol scheme of the URL, including the final ':'. -->
    <script>
        console.log('location.protocol is ' + location.protocol);
    </script>
    <hr>

    <p>Location: host</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Location/host -->
    <!-- Location 接口的 host 属性是包含了主机的一段 USVString，其中包含：主机名，如果 URL 的端口号是非空的，还会跟上一个 ':' ，最后是 URL 的端口号。 -->
    <script>
        console.log('location.host is ' + location.host);
    </script>
    <hr>

    <p>Location: hostname</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Location/hostname -->
    <!-- Location的 hostname 属性是包含了域名的一段 USVString。 -->
    <script>
        console.log('location.hostname is ' + location.hostname);
    </script>
    <hr>

    <p>Location: port</p>
    <!-- https://developer.mozilla.org/en-US/docs/Web/API/Location/port -->
    <!-- 包含端口号的一个DOMString。 -->
    <script>
        console.log('location.port is ' + location.port);
    </script>
    <hr>

    <p>Location: pathname</p>
    <!-- https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname -->
    <!-- 包含URL中路径部分的一个DOMString，开头有一个“/"。 -->
    <script>
        console.log('location.pathname is ' + location.pathname);
    </script>
    <hr>

    <p>Location: search</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Location/search -->
    <!-- Location 接口的 search 属性会返回一段 USVString，其中包含一个URL标识中的 '?' 以及跟随其后的一串URL查询参数。 -->
    <div>
        <a href="?username=zhangsan&password=lisi">search</a>
    </div>
    <script>
        console.log('location.search is ' + location.search);
    </script>
    <hr>

    <p>Location: hash</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Location/hash -->
    <!-- Location 接口的 hash 属性返回一个 USVString，其中会包含URL标识中的 '#' 和 后面URL片段标识符。 -->
    <div>
        <a href="#myhash">hash（点击后，刷新一下页面；或者使用新的地址回车）</a>
    </div>
    <script>
        console.log('location.hash is ' + location.hash);

    </script>

    <hr style="border: solid 2px red;">

    <p>Location.assign()</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Location/assign -->
    <!-- Location.assign() 方法会触发窗口加载并显示指定的URL的内容。 -->
    <div>
        <input id="url_assign" type="url" value="test.html">
        <button onclick="doAssign();">assign</button>
    </div>
    <script>
        function doAssign() {
            // 查看浏览器历史路径
            var url_assign = document.getElementById('url_assign');
            var url = url_assign.value;
            location.assign(url);
        }
    </script>
    <hr>

    <p>Location.reload()</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Location/reload -->
    <!-- Location.reload() 方法用来刷新当前页面。该方法只有一个参数，当值为 true 时，将强制浏览器从服务器加载页面资源，当值为 false 或者未传参时，浏览器则可能从缓存中读取页面。 -->
    <div>
        <button onclick="doReload();">reload</button>
    </div>
    <script>
        function doAssign() {
            location.reload();
        }
    </script>
    <hr>

    <p>Location.replace()</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Location/replace -->
    <!-- Location.replace() 方法以给定的URL来替换当前的资源。 -->
    <!-- 与assign() 方法 不同的是，调用 replace() 方法后，当前页面不会保存到会话历史中（session History），这样，用户点击回退按钮时，将不会再跳转到该页面。 -->
    <div>
        <input id="url_replace" type="url" value="test.html">
        <button onclick="doReplace();">replace</button>
    </div>
    <script>
        // 查看浏览器历史路径
        function doReplace() {
            var url_replace = document.getElementById('url_replace');
            var url = url_replace.value;
            location.replace(url);
        }
    </script>


</body>

</html>